<template>
	<view class="">
		<view class="header flex-column align-center justify-center">
			<u-avatar :src="$companyInfo.logo" size="60"></u-avatar>
			<view class="mt-30 name">欢迎您来到{{$companyInfo.name}}</view>
		</view>
		<view class="content">
			<u-form labelPosition="left" labelWidth="80rpx" :model="form" :rules="rules" ref="form1" errorType="toast">
				<u-form-item leftIcon="account" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="account"
					borderBottom>
					<u-input type="text" v-model="form.account" border="none" placeholder="请输入账号">
					</u-input>
				</u-form-item>
				<view class="mt-10"></view>
				<u-form-item leftIcon="lock" :leftIconStyle="{'fontSize':'48rpx'}" label=" " prop="password"
					borderBottom>
					<u-input type="password" v-model="form.password" border="none" placeholder="请输入密码"></u-input>
				</u-form-item>
			</u-form>

			<view class="submit">
				<u-button :loading="loading" @click="login" type="primary" shape="circle" text="登录"></u-button>
				<navigator hover-class="none" url="/pages/common/register" class="mt-30 text-center">
					注册
				</navigator>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import {
		login
	} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				loading: false,
				src: '',
				form: {
					account: "",
					password: ""
				},
				rules: {
					account: {
						type: 'string',
						required: true,
						message: '请填写账号',
						trigger: ['blur']
					},
					password: {
						type: 'string',
						required: true,
						message: '请填写密码',
						trigger: ['blur']
					},
				}
			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
			login() {
				let vm = this;
				vm.loading = true;
				this.$refs.form1.validate().then(res => {
					login(this.form).then(res => {
						vm.$refs.uToast.show({
							type: 'success',
							message: '登陆成功',
							complete() {
								vm.loading = false
								vm.$store.commit("setUserInfo", res
									.userinfo);
								uni.redirectTo({
									url: '/pages/home/home'
								})
							}
						})
					}).catch(err => {
						vm.loading = false
					})
				}).catch(err => {
					vm.loading = false
				})

			}
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.header {
		background: url('/static/img/bg_login.png') no-repeat;
		background-size: 100% 100%;
		height: 400rpx;
	}

	.name {}

	.content {
		padding: 60rpx;
	}

	.submit {
		margin-top: 90rpx;
	}
</style>